{% extends 'base.html.twig' %}

{% set meta = {
    title: package.humanName ~ ' - ' ~ package.tagline,
    description: package.description,
    canonical: url(package.route),
    social: {
        title: package.tagline ~ ' - Symfony UX ' ~ package.humanName|u.trimStart('UX '),
        description: package.description|striptags,
        image: {
            url: absolute_url(asset(package.getSocialImage('1200x675'))),
            type: 'image/png',
            width: 1200,
            height: 675,
            alt: package.humanName ~ ' - Component Icon',
        },
    }
} %}

{% block header %}
    {{ include('_header.html.twig', {
        theme: 'white'
    }) }}
{% endblock %}

{% block content %}

<article>
    {% block package_header %}{% endblock %}

    {% block package_content %}
        <section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
            <div class="arrow mb-3 d-none d-md-block"></div>
            {% block package_code_blocks %}
                <div class="row mb-5">
                    <div class="col-12 col-md-6">
                        {% block code_block_left %}{% endblock %}
                    </div>
                    <div class="col-12 col-md-6 mt-3 mt-md-0">
                        {% block code_block_right %}{% endblock %}
                    </div>
                </div>
            {% endblock %}
            {% block package_demo %}
                {% if block('demo_title') is defined %}
                    {% set demo_title = block('demo_title') %}
                    {% set demo_content = block('demo_content') %}
                    <div id="demo" style="position: relative;">
                        <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>
                        {% embed 'ux_packages/_package_demo.html.twig' %}
                            {% block title %}{{ demo_title|raw }}{% endblock %}
                            {% block content %}{{ demo_content|raw }}{% endblock %}
                        {% endembed %}
                    </div>
                {% endif %}
            {% endblock %}
        </section>
    {% endblock %}

    {% block package_install %}
        <section class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5">
            {{ include('ux_packages/_package_install.html.twig', {
                package: package,
            }) }}
        </section>
    {% endblock %}

    {% block package_links %}
        {{ include('ux_packages/_package_links.html.twig', {
            package: package
        }) }}
    {% endblock %}

</article>

{% endblock %}
